<template>
  <div class="edit-box">
    <el-form :model="form" label-position="top">
      <el-form-item label="上级">
        <el-cascader
          v-model="form.parentId"
          :show-all-levels="false"
          :options="typeOptions"
          :props="{value: 'id',label: 'name', checkStrictly: true, emitPath: false}"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="form.name" class="input-with-select"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="$emit('changeState',false)">取 消</el-button>
      <el-button type="primary" @click="submit">保存</el-button>
    </div>
  </div>
</template>
<script>
import { update, findById, findList } from '@/api/category'
export default {
  data() {
    return {
      form: {
        id: '',
        companyId: this.$store.state.user.companyId,
        parentId: '0',
        name: ''
      },
      typeOptions: [
        {
          id: '0',
          name: '顶级'
        }
      ]
    }
  },
  beforeDestroy() {
    this.$off('reload')
    this.$off('changeState')
  },
  methods: {
    initDialogData(id) {
      this.initTypeOptions()
      findById(id).then(res => {
        this.form = res.data
      })
    },
    initTypeOptions() {
      let params = { companyId: this.form.companyId, type: 0 }
      findList(params).then(res => {
        this.typeOptions = this.typeOptions.concat(res.data)
      })
    },
    submit() {
      update(this.form).then(res => {
        if (res.success) {
          this.$emit('reload')
          this.$emit('changeState', false)
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.edit-box {
  padding: 0 50px;
  height: 500px;
  overflow-y: auto;
}
.dialog-footer {
  text-align: right;
}
</style>
